import { Col, Row } from 'antd'
import React from 'react'
import ProForm from '@ant-design/pro-form';
import styles from './index.less'
import ChessItem from '../ChessItem';
import { handleTime, ruleType } from '../Exercises';
interface Params {
  area?: any[]
}

export default function ChessPlaying(props: Params) {
  const { area } = props;
  const len = area?.length;
  const content =
    area?.map((item, index) => {
      const { id, ruleType: rule, timeLimit, value, compareType, timeUnit, gradeName } = item?.warningRole ?? {}
      const { id: iId } = item
      const i = 188;
      const j = 1211;
      const { id: comId, ruleType: comRule, timeLimit: comtimeLimit, timeUnit: comtimeUnit, value: comValue, compareType: compareType1 } = item?.completeRole ?? {}
      return {
        i: id, name: `${rule == 17 ? '' : handleTime(timeUnit, 1)}${ruleType(rule, value) || ''}${rule == 5 || rule == 6 || value == 0 || rule == 17 ? "" : (compareType == 1 ? '高于' : '低于')}`, value: timeLimit || '7',
        ii: value ? `${id}${j + 1}` : null, nextName: `${rule == 17 ? '' : (value == 0 ? '预警' : rule == 1 || rule == 2 || rule == 9 || rule == 3 ? '%预警' : '局预警')}`, value1: value || (rule == '3' && compareType == 2 ? "40" : rule == "4" && compareType == 2 ? "15" : "5"),
        iii: comId, nextpName: `${handleTime(comtimeUnit) || ''}${ruleType(comRule, 1, comtimeUnit) || ''}${comRule == 5 || comRule == 6 || comRule == 4 || comRule == 8 ? "" : (compareType1 == 1 ? '高于' : '低于')}`, value2: comtimeLimit || '5', value3: comValue || (comRule == "3" ? "15" : "5"),
        iiii: comValue ? `${comId}${i + 1}` : null, nextppName: `${comRule ? comRule == 1 || comRule == 2 || comRule == 3 || comRule == 9 ? '%完成' : "局完成" : ''}`, iId, isEnable: `${item?.isEnable}`, rule, comRule, timeUnit, comtimeUnit, len, index, gradeName, compareType
      }
    })

  // const content = [
  //     {
  //       i: 'play1', name: '天内对弈胜率低于', value: '7', ii: 'paly11', nextName: '%预警', value1: '40%', iii: 'paly111', nextpName: '局内对弈胜率高于', value2: '5', value3: "40%", iiii: 'play1111', nextppName: '%完成'
  //     },
  //     { i: 'play2', name: '天内对弈数量', value: '7', value1: '15', value2: '3', value3: '5', ii: 'paly22', nextName: '局预警', iii: 'paly222', nextpName: '天内完成', iiii: 'play2222', nextppName: '局完成' },
  //     { i: '', name: '对局连败', value: '7', value1: '5', ii: 'paly33', nextName: '局预警', value2: '7', value3: '5', iii: '', nextpName: '对局胜利', iiii: 'play3333', nextppName: '局完成' },
  //     { i: '', name: '距离上次对弈', value1: '5', value2: '72', value3: '1', ii: 'paly44', nextName: '小时未对弈预警', iii: 'play444', nextpName: '小时对局', iiii: 'play4444', nextppName: '局完成' },
  //     { i: '', name: '对局连胜', value1: '5', ii: 'paly55', nextName: '局预警', iii: '', nextpName: '', iiii: '', nextppName: '' },

  //   ]

  return (
    <div className={styles.chess_playing}>
      <div style={{ marginBottom: '10px' }}>棋灵对弈</div>
      <div style={{ overflow: 'auto' }}>
        <Row style={{ textAlign: 'center', flexWrap: "nowrap" }}>
          <Col className={styles.border_style} span={10}>预警规则</Col>
          <Col className={styles.border_style} span={10}>完成规则</Col>
          <Col className={styles.border_style} span={4}>启用状态</Col>
        </Row>
        <ProForm.Item
        >
          {
            content?.map((item, index) => {
              return <ChessItem
                item={item} key={index} />
            })
          }
        </ProForm.Item>
      </div>
    </div>
  )
}
